<template>
  <div class="page-layout">
    <el-form :model="formInline" ref="form" label-width="90px" class="form-inline" label-suffix="：">
      <el-row :gutter="10">
        <el-col :lg="6" :xl="4"><el-form-item label="保单号">
            <el-input v-model="formInline.insureNum" placeholder="请输入保单号"></el-input>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="订单号">
            <el-input v-model="formInline.orderNum" placeholder="请输入订单号"></el-input>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="箱号">
            <el-input v-model="formInline.containerNumber" placeholder="请输入箱号"></el-input>
          </el-form-item></el-col>
        <!-- <el-col :lg="6" :xl="4"><el-form-item label="运单号">
            <el-input v-model="formInline.tagInvoiceWaybill" placeholder="请输入运单号"></el-input>
          </el-form-item></el-col> -->
        <el-col :lg="1" :xl="1">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" border :data="tableData" :height="tableHeight" :style="{ width: '100%' }">
      <el-table-column prop="insureNum" label="保单号" width="220">
      </el-table-column>
      <el-table-column prop="invoiceStatus" label="发票类型" width="120">
        <template slot-scope="scope">
          {{ scope.row.invoiceStatus == '1' ? '普票' : '专票' }}
        </template>
      </el-table-column>
      <el-table-column prop="invoiceHead" label="发票抬头" width="220">
      </el-table-column>
      <el-table-column prop="creditCode" label="统一社会信用代码（税号）" width="240">
      </el-table-column>
      <el-table-column prop="consigneeMail" label="收货人邮箱" width="220">
      </el-table-column>
      <el-table-column prop="consigneePhone" label="收货人电话" width="140">
      </el-table-column>
      <el-table-column prop="bankBranchName" label="开户银行" width="180">
      </el-table-column>
      <el-table-column prop="registerAddress" label="单位地址" width="180">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <!-- <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          > -->
          <el-button v-if="!!scope.row.invoiceUrl" type="text" size="small"><a :href="scope.row.invoiceUrl" download="发票">下载</a></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 10px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      total: 0,
      pageSize: 10,
      pageNum: 1,
      dialogVisible: false,
      tableHeight: 0,
      currentPage4: 4,
      isShow: false,
      formInline: {
        insureNum: "",
        orderNum: "",
        containerNumber: "",
        // tagInvoiceWaybill: "",
      },
      tableData: [],
    };
  },
  methods: {
    onSubmit() {
      this.pageNum = 1;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getTableData();
    },
    getTableData() {
      const params = {
        ...this.formInline,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.$get("/warranty/invoice/openList", params).then((res) => {
        if (res) {
          this.tableData = res.rows;
          this.total = res.total;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      });
    },
    setTableHeight() {
      this.getTableData();
      this.$nextTick(() => {
        const bodyHeight = window.innerHeight;
        const queryHeight =
          this.$refs.form &&
          this.$refs.form.$el &&
          this.$refs.form.$el.offsetHeight;
        this.tableHeight = bodyHeight - queryHeight - 210 + "px";
      });
    },
  },
  mounted() {
    this.setTableHeight();
    window.addEventListener("resize", this.setTableHeight);
  },
};
</script>
<style scoped lang="less">
.time {
  /deep/.el-form-item__label {
    line-height: 20px;
  }
}
</style>